<template>
  <div class="home-knowledges">
    <knowledge :cknowledges="knowledges" />
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="pageClick"
      :current-page="currentPage"
      :page-count="pageSize"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { selectKnowledgesPage } from "../api/knowledge";
import Knowledge from "../components/Knowledge.vue";

// 使用 ref 创建响应式数据
const knowledges = ref([]);
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);

const getData = async (pageNum = 1) => {
  try {
    let res = await selectKnowledgesPage({
      pageNum: pageNum,
      pageSize: 4,
    });
    if (res.code === 0) {
      knowledges.value = res.data.records;
      total.value = res.data.total;
      currentPage.value = res.data.current;
      pageSize.value = res.data.pages;
    }
  } catch (error) {
    console.error("获取数据失败：", error);
  }
};

onMounted(() => {
  getData(currentPage.value);
});

// 定义 methods
const pageClick = (newPage) => {
  currentPage.value = newPage;
  getData(newPage); // 获取新页的数据
};
</script>

<style>
.home-knowledges {
  width: 1300px;
  margin: 0 auto;
}
</style>